<template>
  <div class>
    <!-- <h5 class="titleInfo"></h5> -->
    <el-form label-width="130px" ref="params" :rules="rules" :model="params">
      <el-row>
        <el-col :span="24" class="flex_Box" v-for=" (item,index) in 8" :key="index">
          <el-form-item :label="'权益'+(index+1)">
            <el-input placeholder="请输入" v-model="arrName[index]"></el-input>
          </el-form-item>
          <div class="picture">上传权益图片</div>
          <newUpload :ref="'uploadImg'+index" :fileNum="1" :file-list="fileList[index]"></newUpload>
        </el-col>
        <!-- <el-col :span="24" class="flex_Box">
          <el-form-item label="权益一">
            <el-input placeholder="请输入" v-model="name1"></el-input>
          </el-form-item>
          <div class="picture">上传权益图片</div>
          <newUpload ref="uploadImg1" :fileNum="1" :file-list="fileList1"></newUpload>
        </el-col>
        <el-col :span="24" class="flex_Box">
          <el-form-item label="权益二">
            <el-input placeholder="请输入" v-model="name2"></el-input>
          </el-form-item>
          <div class="picture">上传权益图片</div>
          <newUpload ref="uploadImg2" :fileNum="1" :file-list="fileList2"></newUpload>
        </el-col>
        <el-col :span="24" class="flex_Box">
          <el-form-item label="权益三">
            <el-input placeholder="请输入" v-model="name3"></el-input>
          </el-form-item>
          <div class="picture">上传权益图片</div>
          <newUpload ref="uploadImg3" :fileNum="1" :file-list="fileList3"></newUpload>
        </el-col>
        <el-col :span="24" class="flex_Box">
          <el-form-item label="权益四">
            <el-input placeholder="请输入" v-model="name4"></el-input>
          </el-form-item>
          <div class="picture">上传权益图片</div>
          <newUpload ref="uploadImg4" :fileNum="1" :file-list="fileList4"></newUpload>
        </el-col>
        <el-col :span="24" class="flex_Box">
          <el-form-item label="权益五">
            <el-input placeholder="请输入" v-model="name5"></el-input>
          </el-form-item>
          <div class="picture">上传权益图片</div>
          <newUpload ref="uploadImg5" :fileNum="1" :file-list="fileList5"></newUpload>
        </el-col>
        <el-col :span="24" class="flex_Box">
          <el-form-item label="权益六">
            <el-input placeholder="请输入" v-model="name6"></el-input>
          </el-form-item>
          <div class="picture">上传权益图片</div>
          <newUpload ref="uploadImg6" :fileNum="1" :file-list="fileList6"></newUpload>
        </el-col>
        <el-col :span="24" class="flex_Box">
          <el-form-item label="权益七" prop>
            <el-input placeholder="请输入" v-model="name7"></el-input>
          </el-form-item>
          <div class="picture">上传权益图片</div>
          <newUpload ref="uploadImg7" :fileNum="1" :file-list="fileList7"></newUpload>
        </el-col>
        <el-col :span="24" class="flex_Box">
          <el-form-item label="权益八" prop>
            <el-input placeholder="请输入" v-model="name8"></el-input>
          </el-form-item>
          <div class="picture">上传权益图片</div>
          <newUpload ref="uploadImg8" :fileNum="1" :file-list="fileList8"></newUpload>
        </el-col>-->
        <!-- 提交按钮 -->
        <el-col :span="13">
          <div class="allCenter">
            <el-button type="primary" class="submitBtn" @click="submitFn()">下一步</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import newUpload from "@/components/imgUpload/index";
import { submitRigths, detail } from "@/api/cardMange";
export default {
  components: { newUpload },
  props: {
    tab: {
      type: Number,
      default: () => {
        return null;
      }
    },
    activeId: {
      type: Number,
      default: () => {
        return null;
      }
    }
  },
  data() {
    return {
      fileList: [[], [], [], [], [], [], [], [], []],
      rights_pic: [],
      arrName: ["", "", "", "", "", "", "", "", ""],

      rules: {
        butlerId: [
          {
            required: true,
            message: "权益不能为空",
            trigger: "blur"
          }
        ]
      },
      value1: 0,
      params: {}
    };
  },
  watch: {},
  mounted() {
    // console.log('activeId',this.activeId)
    if (this.$route.query.type == "edit") {
      this.detailfn();
    }
  },
  methods: {
    //详情
    async detailfn() {
      let res = await detail({ id: this.activeId });
      // console.log("详情11", res.data.data.rights_pic);
      let pic = JSON.parse(res.data.data.rights_pic);
      let photoList = [];
      let nameList = [];
      if (res.data.code == 200) {
        pic.forEach((item, index) => {
          if (item.pic) {
            photoList.push([item.pic]);
          }
          if (item.name) {
            nameList.push(item.name);
          }
        });
      }
      this.arrName = nameList;
      console.log("photoList", photoList);
      console.log("nameList", nameList);
      // for(i=0;i<=photoList.length;i++){
      //   this.fileList.push({
      //       url: localStorage.getItem('imgUrlPrefix') + i
      //     })
      // }
      photoList.forEach((item, i) => {
        this.fileList[i].push({
          url: localStorage.getItem("imgUrlPrefix") + item
        });
      });
      // nameList.forEach(i=>{
      //   arrName.push(i)
      // })
    },
    submitFn() {
      // this.activeId = 2;
      // let arr1, arr2, arr3, arr4, arr5, arr6, arr7, arr8;
      // console.log(this.$refs);
      let arr = [];
      for (let i = 0; i <= 7; i++) {
        // let str = 'uploadImg'
        console.log(this.$refs["uploadImg" + [i]][0].submitUpload()[0]);
        console.log(this.arrName[i]);
        if (this.arrName[i]) {
          arr.push({
            name: this.arrName[i],
            pic: this.$refs["uploadImg" + [i]][0].submitUpload()[0]
          });
        }
      }
      console.log(arr);
      this.rights_pic = arr;
      // let arr1 = this.$refs.uploadImg1.submitUpload()[0];
      // let arr2 = this.$refs.uploadImg2.submitUpload()[0];
      // let arr3 = this.$refs.uploadImg3.submitUpload()[0];
      // let arr4 = this.$refs.uploadImg4.submitUpload()[0];
      // let arr5 = this.$refs.uploadImg5.submitUpload()[0];
      // let arr6 = this.$refs.uploadImg6.submitUpload()[0];
      // let arr7 = this.$refs.uploadImg7.submitUpload()[0];
      // let arr8 = this.$refs.uploadImg8.submitUpload()[0];
      // this.rights_pic = [
      //   { name: this.name1, pic: arr1?arr1:null },
      //   { name: this.name2, pic: arr2?arr2:null },
      //   { name: this.name3, pic: arr3?arr3:null },
      //   { name: this.name4, pic: arr4?arr4:null },
      //   { name: this.name5, pic: arr5?arr5:null },
      //   { name: this.name6, pic: arr6?arr6:null },
      //   { name: this.name7, pic: arr7?arr7:null },
      //   { name: this.name8, pic: arr8?arr8:null }
      // ];
      let data = {
        id: this.activeId,
        rights_pic: JSON.stringify(
          this.rights_pic.length ? this.rights_pic : ""
        )
      };
      console.log(data);
      submitRigths(data)
        .then(res => {
          console.log("res", res);
          if (res.data.code == 200) {
            this.$message({
              message: "提交成功",
              type: "success"
            });
            this.$emit("push", this.tab, this.activeId, res.data.code);
          } else {
            this.$message({
              message: res.data.msg,
              type: "warning"
            });
          }
        })
        .catch(err => {
          console.log("err", err);
        });
    }
  }
};
</script>
<style scoped>
.flex_Box {
  display: flex;
  margin-top: 45px;
  align-items: center;
}
.picture {
  margin: -20px 20px 0px 20px;
}
.allCenter {
  text-align: center;
  margin: 40px;
}
</style>